﻿<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>-->

    <link rel="stylesheet" href="http://demos.jquerymobile.com/1.2.1/css/themes/default/jquery.mobile-1.2.1.css" />
    <link rel="stylesheet" href="http://demos.jquerymobile.com/1.2.1/docs/_assets/css/jqm-docs.css" />
    <script src="//code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://demos.jquerymobile.com/1.2.1/docs/_assets/js/jqm-docs.js"></script>
    <script src="http://demos.jquerymobile.com/1.2.1/js/jquery.mobile-1.2.1.js"></script>



<script>
        $(document).on('pagebeforeshow', '#test', function () {
        alert("here");
        $('#questioncount').text('Question: 1 OF 3');

        $('#videoframe').show();

        $('#submit').click(function () {
            alert("hi");
            //$('#msg').append('jkfldjjfkasdjf');
            $('#popupBasic').show();
        });
    });
    </script>
</head>


<body>

    <div data-role="page" id="test">



        <div data-role="header" data-theme="b">
            <h1>Kansas Test Driving Exam - Motorcycle</h1>
            <p style="color: green;">Current Score: 100%</p>
        </div><!-- /header -->

        <div data-role="content">

            <div class="ui-body ui-body-b">
                <h2>Watch this video then answer if texting and driving is safe?</h2>
                <iframe style="display: none;" id="videoframex" class="youtube-player" type="text/html" width="400" height="300" src="http://www.youtube.com/embed/yeF_b8EQcK0?html5=1" frameborder="0"> </iframe>
                <img id="testimage" src="stopsign.jpg" style="display: none;" />
                <img id="videoframe" src="vidoe.png" style="display: none;" width="400" height="300" />
                <hr />
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup">
                        <!--<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" />   checked="checked" />
                        <label for="radio-choice-1">If nobody is there proceed through intersection.</label>

                        <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
                        <label for="radio-choice-2">Come to complete stop.  Look both ways then proceed.</label>

                        <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
                        <label for="radio-choice-3">That sign is going on my wall.</label>-->

                        <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
                        <label for="radio-choice-2">True</label>

                        <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
                        <label for="radio-choice-3">False</label>





                    </fieldset>
                </div>
                
                <div class="ui-grid-b" style="width: 78%;">
                    <div class="ui-block-a" style="text-align: left;"><button type="submit" id="submit" data-theme="a" data-rel="popup" data-position-to="#statusmessage">Next</button></div>
                    <div id="middle" class="ui-block-b" style="text-align: center;"></div>
                    <div class="ui-block-c" style="text-align: right;"><button type="submit" data-theme="d">Cancel</button></div>
                </div><!-- /grid-a -->
  <!--              <p><strong>Correct</strong> That is a stop sign bro.....</p>--> 

                <a href="#popupBasic" data-rel="popup" data-position-to="#middle">_</a>

                <div data-role="popup" id="popupBasic" class="ui-content" data-overlay-theme="b">
                    <p>&nbsp;</p>
                    <p><strong>Correct - </strong>Always pay attention while driving.<p>
                    <p>&nbsp;</p>
                </div>


                <!--<div id="statusmessage"></div>
                <div data-demo-html="true">-->
<!--                    <a href="#positionSelector" data-role="button" data-inline="true" data-rel="popup" data-position-to="#statusmessage">Click Me!</a>-->
                    <!--<input type="button" id="positionSelector" value="Click Me Foo" data-inline="true" data-rel="popup" data-position-to="#statusmessage" />
                    <div data-role="popup" id="positionSelector" class="ui-content" data-theme="d">
                        <p id="msg"></p>
                    </div>-->


                <!--</div>-->

                <!--<a href="http://www.facebook.com/share.php?u=http://www.forrent.com/apartment-community-profile/999909259.php" target="_blank" rel="noFollow" class="proSprite proFacebookSprite">
                    <span class="hide">Share on Facebook</span>
                </a>-->

                </div><!-- /themed container -->



        </div><!-- /content -->

        <div data-role="footer" data-position="fixed" data-theme="b">
            <h3>
                <div class="ui-grid-b">
                    <div class="ui-block-a" style="text-align: left;"></div>
                    <div id="questioncount" class="ui-block-b" style="text-align: center;"></div>
                    <div class="ui-block-c" style="text-align: right;"></div>
                </div><!-- /grid-a -->
            </h3>      
        </div><!-- /content -->

    </div><!-- /page -->

</body>
</html>